<script lang="ts" setup>
import {getSiteInfo} from "~/server/system.service";

const reactiveData = reactive({
  totalVisit: '' as any,
  visitToday: '' || 99 + '+' as any,
  visitYesterday: '' || 99 + '+' as any,
  visitMonth: '' || 999 + '+' as any,
  articleCount: '' as any,
  friendLinkCount: '' as any,
  commentCount: '' as any
})
let {
  totalVisit,
  visitToday,
  visitYesterday,
  visitMonth,
  articleCount,
  friendLinkCount,
  commentCount
} = toRefs(reactiveData)

const dataFlag = ref(false)

async function getStatistics(): Promise<void> {
  await fetch('https://v6-widget.51.la/v6/KBrDrjdnMRwfJN8K/quote.js').then(res => res.text()).then((data) => {
    try {
      let title = ['最近活跃访客', '今日人数', '今日访问', '昨日人数', '昨日访问', '本月访问', '总访问量']
      let num: any = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g)
      reactiveData.totalVisit = String(num[6]).padStart(8, '0') + '°'
      reactiveData.visitToday = num[2]
      reactiveData.visitYesterday = num[4]
      reactiveData.visitMonth = num[5]
    }catch (e){
      dataFlag.value = true
    }
  })
}

async function getInfo(): Promise<void> {
  await getSiteInfo().then(({data}: any) => {
    if (dataFlag.value) {
      reactiveData.totalVisit = String(data.data.viewCount).padStart(8, '0') + '°'
    }
    reactiveData.articleCount = data.data.articleCount
    reactiveData.friendLinkCount = data.data.friendLinkCount
    reactiveData.commentCount = data.data.commentCount
  })
}

onMounted(async () => {
  await getStatistics()
  await getInfo()
})
</script>
<template>
  <section class='flex statistics fade-before fade-after'>
    <h5 class='part-title'>星辰数据</h5>
    <ul class='count-num heat'>
      <li id='hot-num' class='num' title='浏览次数' style="--count: 10">{{ totalVisit }}</li>
    </ul>
    <ul class='count-num web box'>
      <li><h6>文章数据</h6><em class='num' title='文章数量'>{{ articleCount }}</em></li>
      <li><h6>结识朋友</h6><em class='num' title='友链数量'>{{ friendLinkCount }}</em></li>
      <li><h6>留下足迹</h6><em class='num' title='评论数量'>{{ commentCount }}</em></li>
      <li><h6>今日访问</h6><em class='num' title='今日访问'>{{ visitToday }}</em></li>
      <li><h6>昨日访问</h6><em class='num' title='昨日访问'>{{ visitYesterday }}</em></li>
      <li><h6>本月访问</h6><em class='num' title='本月访问'>{{ visitMonth }}</em></li>
    </ul>
  </section>
</template>
<style scoped>
@import "@/static/css/home/statistics.css";
</style>
